<template>
  <div class="flex ht100 flex-v pd-15 box-border">
    <div class="header">
      <span>{{$route.meta.title}}</span>
      <router-link :to="{name:'appArticleEdit'}">
        <el-button type="primary" class="pull-right">新建</el-button>
      </router-link>
    </div>
    <div class="search flex">
      <el-input class="flex1" placeholder="请输入关键词搜索"  v-on:keyup.native="keywordChange"  v-model="keywords"></el-input>
    </div>
    <div class="content flex1 mt-10 flex flex-v">
      <el-table
        :data="data"
        class="flex1"
        height="100%;"
        border
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="title"
          label="文章标题"
          width="180">
        </el-table-column>
        <el-table-column
          label="封面"
          width="180">
          <template scope="scope">
            <img :src="scope.row.cover" style="width: 150px;"/>
          </template>
        </el-table-column>

        <el-table-column
          prop="createdAt"
          label="创建时间">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template scope="scope">
            <router-link :to="{name:'appArticleEdit',query:{id:scope.row.id}}">
              <el-button size="small">编辑</el-button></router-link>
            <el-button @click="deleteItem(scope.row,scope.$index)"
                       size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageParams">
        <el-pagination
          layout="prev, pager, next"
          :page-count="pageParams.pageTotal"
          :current-page="pageParams.pageNum"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        data:[],
        pageParams:[],
        keywords:''
      }
    },
    methods:{
      getList:function () {
        this.Api.getArticle({pageParams:this.pageParams}).then((response)=>{
          this.data=response.data.data;
          this.pageParams=response.data.pageParams;
        })
      },
      handleCurrentChange:function(val) {
        this.pageParams.pageNum=val;
        this.getList();
      },
      keywordChange:function () {
        if(this.keywords!=''){
          this.pageParams.where.title={
            $like:"%"+this.keywords+"%"
          }
        }else{
          if(this.pageParams.where && this.pageParams.where.title){
            this.pageParams.where.title=undefined;
          }
        }
        this.pageParams.pageNum=1;
        this.getList();
      },
      deleteItem:function (row,index) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.Api.deleteArticle(row.id).then((response)=>{
              if(response.data){
                this.data.splice(index,1);
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

    },
    mounted(){

       this.pageParams=this.$store.state.auth.pageParams;
       this.pageParams.where.wechatId=undefined;
       this.getList();
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .header{
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  .header span{
    line-height: 40px;
    font-size: 20px;
  }
</style>
